<template>
  <div class="setting-r-content">
    <div class="search-content">
      <Col
        class="panel search-panel"
        span="24"
      >
      <Form
        :model="formHeader"
        :label-width="80"
        inline
      >
        <FormItem label="城市：">
          <Input
            v-model.trim="formHeader.name"
            placeholder="请输入城市名称..."
            clearable
            style="width: 200px"
          ></Input>
        </FormItem>
        <FormItem class="margin-l">
          <Button
            type="primary"
            @click="_queryThing"
            style="margin-right: 15px;"
          >查询</Button>
          <Button
            type="primary"
            @click="_addNew"
            :disabled="userRole=='ROLE_DEMO'"
          >新增</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="w1 setting-scroll__content">
      <Row class="setting-content__row">

        <Col
          class="panel table-panel"
          :span="24"
        >
        <Table
          :columns="columns"
          :data="tableDatas"
          :loading="pageInfo.loading"
          border
        ></Table>
        </Col>

        <!-- 分页 -->
        <Col
          class="panel page-panel cf"
          :span="24"
          style="margin-bottom: 10px;"
        >
        <Page
          :total="pageInfo.total"
          :current.sync="pageInfo.page"
          class="fr"
          @on-change="switchThePaging"
          :page-size="15"
        ></Page>
        </Col>

        <Col
          :span="24"
          class="page-bottom"
        >
        </Col>

        <!-- 新增表单 -->
        <Modal
          v-model="dialog.add"
          title="新增城市"
          width="30%;"
        >
          <Form
            :model="addForm"
            :label-width="120"
            :rules="customValidate"
            ref="addFormRef"
          >
            <FormItem
              label="省级行政区域："
              prop="province"
            >
              <Select
                v-model="addForm.province"
                filterable
                style="width: 200px"
                @on-change="selectCity"
              >
                <Option
                  v-for="(item,index) in data"
                  :value="item.name"
                  :key="index"
                >{{ item.name }}</Option>
              </Select>
            </FormItem>

            <FormItem
              label="地级市："
              prop="city"
            >
              <Select
                v-model="addForm.city"
                filterable
                style="width: 200px"
              >
                <Option
                  v-for="(item,index) in cityList"
                  :value="item.name"
                  :key="index"
                >{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button @click="dialog.add=false">取消</Button>
            <Button
              type="primary"
              @click="submitAddNew"
              :loading="dialog.btnloading"
            >确定</Button>
          </div>
        </Modal>
      </Row>
    </div>
  </div>

</template>
<script>
import { mapState } from "vuex";
import { getCityListOfAll, addCity, removeCity } from "@/api";
import chinaCityDatas from "@/utils/china-data";

export default {
  mounted() {
    this._getCityList();
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  data() {
    return {
      addNewDisabled: false,
      formHeader: {
        name: ""
      },
      data: chinaCityDatas[86],
      cityList: [],

      addForm: {
        city: "",
        provide: ""
      },

      dialog: {
        add: false,
        edit: false,
        btnloading: false
      },
      pageInfo: {
        loading: false,
        total: 0,
        page: 1
      },
      tableDatas: [],
      columns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center"
        },
        {
          title: "城市",
          align: "center",
          key: "name"
        },
        {
          title: "创建时间",
          align: "center",
          key: "createdAt",
          render: (h, params) => {
            let time = this.moment(params.row.createdAt).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            return h("span", time);
          }
        },
        {
          title: "操作",
          align: "center",
          width: 190,
          render: (h, params) => {
            const _t = this;
            return h("div", [
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "您确定要删除这条数据吗?",
                    transfer: true,
                    cancelText: "取消"
                  },
                  on: {
                    "on-ok": () => {
                      const row = { ...params.row };
                      _t._handleDelete(row);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px"
                      },
                      props: {
                        type: "error",
                        size: "small"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }
      ],
      customValidate: {
        province: [
          {
            required: true,
            message: "请选择省市区",
            trigger: "change"
          }
        ],
        city: [
          {
            required: true,
            message: "请选择地级市",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    selectCity(name) {
      this.addForm.city = null;
      const index = this.data.find(t => t.name === name).value;
      this.cityList = chinaCityDatas[index];
    },

    switchThePaging(index) {
      this.pageInfo.page = index;
      this._getCityList();
    },

    _queryThing() {
      let vm = this;
      vm.pageInfo.page = 1;
      this._getCityList();
    },

    _addNew() {
      this.dialog.add = true;
      this.$nextTick(_ => {
        this.$refs.addFormRef.resetFields();
        this.addForm.province = "";
      });
    },

    submitAddNew() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          this.dialog.btnloading = true;
          let params = {
            name: this.addForm.city
          };
          this.addNewDisabled = true;
          addCity(params).then(res => {
            if (res.code == 200) {
              this.$Message.success("新增成功");
              this.dialog.btnloading = false;
              this.dialog.add = false;
              this.addNewDisabled = false;
              this._getCityList();
            } else {
              this.addNewDisabled = false;
              this.dialog.btnloading = false;
              this.$Message.error(res.message);
            }
          });
        }
      });
    },

    _getCityList() {
      const params = {
        name: this.formHeader.name,
        page: this.pageInfo.page,
        size: 15
      };
      this.pageInfo.loading = true;
      getCityListOfAll(params).then(res => {
        if (res.code == 200) {
          this.tableDatas = res.data.list;
          this.pageInfo.total = res.data.total;
          setTimeout(() => {
            this.pageInfo.loading = false;
          }, 500);
        } else {
          setTimeout(() => {
            this.pageInfo.loading = false;
          }, 500);
        }
      });
    },

    // submitEdit() {
    //   let _t = this;
    //   let params = { ..._t.editForm
    //   };
    //   this.$refs.editFormRef.validate(valid => {
    //     if (valid) {
    //       let para = {
    //         id: params.id,
    //         name: params.name,
    //       }
    //       editCity(para).then(res => {
    //         if (res.code == 200) {
    //           this.$Message.success('编辑成功');
    //           this.dialog.edit = false;
    //           this._getCityList();
    //         } else {
    //           this.$Message.error(res.message)
    //         }
    //       })
    //     }
    //   })
    // },

    _handleDelete(row) {
      const params = { ...row };
      removeCity(params.id).then(res => {
        if (res.code == 200) {
          this.$Message.success("删除成功");
          this._getCityList();
        } else {
          this.$Message.error(res.message);
          this._getCityList();
        }
      });
    }
  }
};
</script>
